<template>
  <div class="main">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-submenu index="2" style="float: right">
        <template slot="title">{{$store.state.user.username}}</template>
        <el-menu-item index="2-1">个人</el-menu-item>
        <el-menu-item index="2-2">设置</el-menu-item>
        <el-menu-item index="2-3">
          <span @click="loginOut">
          退出
          </span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <h1 class="title">满意度评价</h1>
    <div class="desc">
      亲爱的学员：<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好!<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;感谢您参与此次培训，期望这次培训对您有所帮助。为了更好地匹配您的需求、优化培训工作，请您填写以下问卷，给我们提供宝贵的评价和建议,谢谢!
      <br>
      <hr style="border-style: dotted ">
      <div >
        <h5 class="teacher">请选择老师进行满意度调查</h5>
        <el-select clearable v-model="teacher.id" placeholder="请选择类别" class="teacher" @change="isShowStatis">
          <el-option
            v-for="ify in teachers"
            :key="ify.id"
            :label="ify.username"
            :value="ify.id" >
          </el-option>
        </el-select>
      </div>

      <div v-show="showIsFlag">
        <el-form :model="ruleForm" class="formStatis">
          <div class="option" v-for="(option,index) in options" :key="index">
            <h4>{{index+1}}. 您对培训场地及设备安排的满意程度。(1分非常不满意，5分非常满意) *</h4>
            <el-form-item >
              <el-radio-group v-model="ruleForm['t'+(index+1)]">
                <el-radio label="1">1分</el-radio>
                <el-radio label="2">2分</el-radio>
                <el-radio label="3">3分</el-radio>
                <el-radio label="4">4分</el-radio>
                <el-radio label="5">5分</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="option">
            <h4>对{{teacher.username}}老师有什么想说的</h4>
            <el-form-item>
              <el-input rows="10" type="textarea" v-model="desc"></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    name: "Index",
    mounted() {
      var user = window.localStorage.getItem("user")
      if(user==null || user=='{}'){
        this.$router.push("login")
      }
    },
    data() {
      return {
        activeIndex: '1',
        teacher:{},
        teachers:[
          {id:1,username:'杜翔'},
          {id:2,username:'李四'},
          {id:3,username:'王五'},
        ],
        ruleForm: {},
        desc:'无',
        options:[
          {title:"您对培训场地及设备安排的满意程度。(1分非常不满意，5分非常满意) *"},
          {title:"您对培训场地及设备安排的满意程度。(2分非常不满意，5分非常满意) *"},
          {title:"您对培训场地及设备安排的满意程度。(3分非常不满意，5分非常满意) *"},
          {title:"您对培训场地及设备安排的满意程度。(4分非常不满意，5分非常满意) *"},
          {title:"您对培训场地及设备安排的满意程度。(5分非常不满意，5分非常满意) *"},
          {title:"您对培训场地及设备安排的满意程度。(6分非常不满意，5分非常满意) *"}
        ],
        showIsFlag:false
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      submitForm(ruleForm){
        if(Object.keys(this.ruleForm).length==this.options.length){
          this.ruleForm.desc=this.desc
          console.log(JSON.stringify(this.ruleForm))
          this.ruleForm={}
          this.$confirm("提交成功，确认是否退出").then(()=>{
            window.localStorage.removeItem("user")
            this.$router.push("/login")
          }).catch(()=>{
            this.$message.info("刷新页面")
          })
        }else{
          this.$message.error("请将所有选项都选则")
        }
      },
      isShowStatis(){
        if(this.teacher.id!=null && this.teacher.id!=""){
          this.showIsFlag=true
        }else{
          this.showIsFlag=false
        }
      },
      loginOut(){
        window.localStorage.removeItem("user")
        this.$router.push("login")
      }
    }
  }
</script>

<style scoped>
  a{
    text-decoration: none;
  }
  .main {
    width: 50%;
    margin: 0 auto;
    border: 1px solid #D4F2E7;
  }

  .title {
    color: cornflowerblue;
    text-align: center;
  }

  .desc {
    margin-top: 50px;
  }

  .option {
    margin-top: 60px;
  }

  .formStatis {
    padding-left: 20px;
  }
  .teacher{
    display: inline-block;
  }
</style>
